<template>
    <view class="content">
        <view class="head">
			<view>
				<image :src="person.avater"></image>
				<text>{{person.realName}}</text>
			</view>
		</view>
		<view class="middle">
			<view class="title">
				<text>线索佣金合计</text>
				<view><text>¥0.</text><text>00</text></view>
			</view>
			<view class="divide"></view>
			<view class="info">
				<view class="left">
					<view>可提现</view>
					<view><text>¥0</text><text>.00</text></view>
				</view>
				<view class="btn">立即提现</view>
			</view>
		</view>
		<view class="bottom">
			<image src="../../static/collection.png">
				<view class="image_title">我的收藏</view>
				<view class="image_txt image_txt_1">0个</view>
			</image>
			<image src="../../static/mycode.png">
				<view class="image_title">我的推广码</view>
				<view class="image_txt image_txt_2">0个</view>
			</image>
			<image src="../../static/myreport.png">
				<view class="image_title">我的战报</view> 
				<view class="image_txt image_txt_3">0个</view>
			</image>
		</view>
    </view>
</template>
<script>
	import helper from "../../utils/helper";
	import { agingApi as agingApi } from "../../utils/api";
	export default {
		data() {
			return {
				person:{}
			}
		},
		onLoad(){
			this.getuserinfo()
		},
		methods: {
			async getuserinfo(){
				
				var user=(await helper.getUser())
				this.person=user
				this.person.avater=(await helper.getIcon())
			}
		}
	}
</script>
<style lang="scss">
	.content{
		height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.head{
		width: 750rpx;
		height: 392rpx;
		background: #252F62;
		> view{
			position: absolute;
			margin-top: 136rpx;
			margin-left: 24rpx;
			display: flex;
			align-items: center;
			image{
				width: 136rpx;
				height: 136rpx;
				margin-right: 40rpx;
				border-radius: 68rpx;
			}
			text{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
			}
		}
		
	}
	.middle{
		//padding-left: 24rpx;
		//box-sizing: border-box;
		margin-top: -80rpx;
		width: 702rpx;
		height: 244rpx;
		background: linear-gradient( 164deg, #5398FF 0%, #7F74FF 100%), linear-gradient( 178deg, rgba(255,255,255,0.5) 0%, rgba(21,15,45,0.5) 100%);
		border-radius: 16rpx;
		.divide{
			width: 702rpx;
			//height: 2rpx;
			border: 2rpx solid #CECDFF;
			opacity: 0.12;
			margin-top: 32rpx;
		}
		.title{
			margin-top: 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			> text:first-child{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				margin-left: 24rpx;
			}
			> view{
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				
				color: #FFFFFF;
				line-height: 44rpx;
				text-align: center;
				font-style: normal;
				margin-right: 40rpx;
				>text:first-child{
					font-size: 32rpx;
				}
				>text:last-child{
					font-size:20rpx;
				}
			}
		}
		.info{
			display: flex;
			justify-content: space-between;
			.left{
				margin-left: 24rpx;
				> view:first-child{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 34rpx;
					text-align: left;
					font-style: normal;
					margin-top: 32rpx;
				}
				> view:last-child{
					margin-top: 4rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					color: #FFF22B;
					text-align: left;
					font-style: normal;
					> text:first-child{
						font-size: 36rpx;
					}
					> text:last-child{
						font-size: 24rpx
					}
				}
			}
			.btn{
				margin-top: 30rpx;
				margin-right: 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 192rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 46rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #6052FF;
				line-height: 40rpx;
				text-align: right;
				font-style: normal;
			}
		}
	}
	.bottom{
		display: flex;
		flex-wrap: wrap;
		row-gap: 32rpx;
		margin-top: 32rpx;
		image{
			margin-left: 24rpx;
			width: 338rpx;
			height: 192rpx;
			position: relative;
			.image_title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #383838;
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				position: absolute;
				top: 24rpx;
				left: 24rpx;
			}
			.image_txt{
				position: absolute;
				top: 84rpx;
				left: 24rpx;
				width: 114rpx;
				height: 44rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				
				line-height: 44rpx;
				text-align: left;
				font-style: normal;
				display: flex;
				justify-content: center;
				align-items: center;
				
			}
			.image_txt_1{
				color: #EE9D11;
			}
			.image_txt_2{
				color: #4599D9;
			}
			.image_txt_3{
				color: #D18F6A;
			}
		}
	}
</style>